<template>
    <el-popover :disabled="isEmptyContent" placement="left-start" trigger="hover" :popper-style="popoverStyle" @before-enter="handleBeforeEnter">
        <template #reference>
            <div v-if="!isEmptyContent" class="render-reply-content">
                {{ row.replyContent.join("，") }}
            </div>
            <div v-else>--</div>
        </template>
        <div class="speechcraft-list">
            <div v-for="speechItem in replyContent" class="speechcraft-list-item">
                <div class="speechcraft-item-title" >{{ speechItem.title || '--' }}</div>
                <div class="speechcraft-item-content" >{{ speechItem.text }}</div>
                <div v-if="speechItem.attachments.length" class="speechcraft-item-attachments" >
                    <div v-for="attachment in speechItem.attachments" class="attachment-item">
                        <MaterialIcon :type="attachment.type" />
                        <span>
                            <span>
                                {{ [3, 11].includes(attachment.type) ? attachment.title : attachment.fileInfo.name }}
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </el-popover>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import MaterialIcon from '@renderer/components/win/materialContent/components/material-render/MaterialIcon.vue'

import {
    getSmartReplySingleRecordDetail,
    getSmartReplyChatRecordDetail
} from '@renderer/ajax/api/smartReply'


const props = defineProps({
    row: {
        type: Object,
    },
    replyType: {
        type: String,
    }
});

/**
 * 是否为空的内容
 */
const isEmptyContent = computed(() => {
    return !(Array.isArray(props.row.replyContent) && props.row.replyContent.length)
})

const popoverStyle = reactive({
    width: '460px',
    padding: '0px'
})

/**
 * 回复内容详情
 */
const replyContent = reactive([]);

const handleBeforeEnter = async () => {
    const getApi = props.replyType === 'privateChat' ? getSmartReplySingleRecordDetail : getSmartReplyChatRecordDetail
    const res = await getApi({ id: props.row.id })
    replyContent.length = 0
    replyContent.push(...(res || []))
}

</script>
<style lang="scss" scoped>
.render-reply-content {
    cursor: pointer;
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.speechcraft-list {
    padding: 24px;
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    .speechcraft-list-item {
        width: 100%;
    }

    .speechcraft-item-title {
        font-size: 16px;
        color: #333;
        font-weight: 600;
    }

    .speechcraft-item-content {
        margin-top: 12px;
        padding: 8px;
        border: 1px solid #eaeaea;
        background-color: #f3f3f3;
        border-radius: 4px;
        color: #5a5a5a;
    }

    .speechcraft-item-attachments {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        .attachment-item {
            display: flex;
            align-items: center;
            gap: 12px;
            border-radius: 4px;
            background-color: #f8f8f8;
            img {
                width: 30px;
                height: 30px;
            }
        }
    }
}

.skeleton-content {
    padding: 16px;
    .skeleton-title {
        margin-bottom: 12px;
        width: 30%;
    }
    .skeleton-speech {
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        .el-skeleton__item  {
            // height: 36px;
            flex: 1;
        }
        .el-skeleton__image {
            flex: 0 0 28px;
            border-radius: 8px;
            width: 28px;
            height: 28px;
        }
    }
}
</style>
